<template>
    <div class="container">
        <van-nav-bar 
            :title="title" 
            left-text="返回" 
            left-arrow 
            @click-left="$router.go(-1)" >
        </van-nav-bar>

        <div class="wrapper">
            
            <van-address-edit
                :area-list="AreaList"
                :address-info="addressInfo"
                show-postal
                show-delete
                show-set-default
                @save="onSave"
                @delete="onDelete"
            />
        </div>

    </div>
</template>

<script>
    import { created, updated, selectOne } from '@/api/UserAddress'
    import { AddressEdit, NavBar, Row, Col, Icon, CellGroup, Cell, Toast, Tabs, Tab, Radio, Button } from 'vant'
    import { mapGetters } from 'vuex'
    import AreaList from '../../../public/static/area'
    import { randomLenNum } from '@/libs/utils'

    export default {
        name: 'Banding',
        components: {
            [AddressEdit.name]: AddressEdit,
            [NavBar.name]: NavBar,
            [Row.name]: Row,
            [Col.name]: Col,
            [Icon.name]: Icon,
            [CellGroup.name]: CellGroup,
            [Cell.name]: Cell,
            [Toast.name]: Toast,
            [Tabs.name]: Tabs,
            [Tab.name]: Tab,
            [Radio.name]: Radio,
            [Button.name]: Button,
        },
        data() {
            return {
                /**
                 * 接收参数
                 * id
                 */
                params: this.$route.query,
                title: '新增地址',
                AreaList,
                addressInfo: {}
            }
        },
        computed: {
            ...mapGetters(['userinfo'])
        },
        created() {
            if(this.params.id) {
                this.title = '编辑地址'
                this.getUserAddress()
            }
            this.addressInfo.tel = this.userinfo.mobile
        },
        methods: {
            onSave(form) {
                if(form.id) {
                    form.default = form.isDefault
                    updated(form).then(response => {
                       if (response.data.status === 200) {
                            Toast('修改成功');
                            this.$router.go(-1)
                        } else {
                            Toast('修改失败');
                        }
                    })
                } else {
                    const userId = this.userinfo.id ? this.userinfo.id : randomLenNum(3)
                    form = Object.assign(form, {userId})
                    created(form).then(response => {
                        if (response.data.status === 200) {
                            Toast('新增成功');
                            this.$router.go(-1)
                        } else {
                            Toast('新增失败');
                        }
                    })
                }
            },
            onDelete() {
                Toast('delete');
            },
            getUserAddress() {
                selectOne(this.params.id).then(response => {
                    this.addressInfo = response.data.data
                    this.addressInfo.isDefault = response.data.data.default
                })
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../assets/styles/common.scss";
.container{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}


</style>